<template>
	<view class="page-wraper">
		<customNav title1="首页" bgColor="#4E6ECC" :backIcon="false" backIconColor="white"></customNav>
		<addressSearch ref="setAddres" @addressBtn='addressBtn' @searchBtn='searchBtn' v-if="isShowAddressSearch" :isShowAddress="false">
		</addressSearch>
		<view class="background">
			<!-- <cssArcBackground bgColor="#F2F3F5" height="100" /> -->
			
			<view class="content-view">
				<view class="swiperImageViewClass">
					<view class="pad28">
						<view class="contentViewBox" >
							<view class="swiper_box_banner_box">
								<swiper circular="false" vertical="false" display-multiple-items="1" :autoplay="true"
									:vertical="false" style="border-radius: 20rpx;">
									<swiper-item v-for="(item,index) in rotationChartList" :key="index"
										@click="$disableDoubleClick(swiperClick,'onoff',item)" style="border-radius: 20rpx;">
										<!-- 支付宝小程序需要添加view点击才能生效 -->
										<!-- <view @click="swiperClick(item)"> -->
										<!-- 注释当前swiper图片暂时无法展示，使用固定图片 -->
										<image class="imageSwiperClass" mode="aspectFill" :src="item.cover_url"></image>
										<!-- </view> -->
									</swiper-item>
								</swiper>
							</view>
							<view class="swiper-item-text swiper-item-absolute">猜你喜欢TOP5</view>
						</view>
						<view class="view-box" style="margin-top: 20px;">
							<view class="view-item-imgae" @click="$disableDoubleClick(homeClickFuc,'onoff',5)">
								<image style="width: 66rpx;" src="@/static/logistics.png" mode="widthFix"></image>
							</view>
							<view style="width: 20px;"></view>
							<view class="view-item-imgae" @click="$disableDoubleClick(homeClickFuc,'onoff',6)"><image style="width: 52rpx;" src="@/static/banking.png" mode="widthFix"></image>
							</view>
							<view style="width: 20px;"></view>
							<view class="view-item-imgae" @click="$disableDoubleClick(homeClickFuc,'onoff',7)"><image style="width: 58rpx;" src="@/static/plug.png" mode="widthFix"></image>
							</view>
							<view style="width: 20px;"></view>
							<view class="view-item-imgae" @click="$disableDoubleClick(homeClickFuc,'onoff',8)">
								<image style="width: 66rpx;" src="@/static/overseas.png" mode="widthFix"></image>
							</view>
							<view style="width: 20px;"></view>
							<view class="view-item-imgae" @click="$disableDoubleClick(homeClickFuc,'onoff',9)">
								<image style="width: 54rpx;" src="@/static/assure_car.png" mode="widthFix"></image>
							</view>
						</view>
						
						<view class="view-box" style="margin-top: 8rpx;">
							<view class="view-item-text" @click="$disableDoubleClick(homeClickFuc,'onoff',5)">
								<view class="view-text">物流服务</view>
							</view>
							<view style="width: 20px;"></view>
							<view class="view-item-text" @click="$disableDoubleClick(homeClickFuc,'onoff',6)">
								<view class="view-text">金融垫付</view>
							</view>
							<view style="width: 20px;"></view>
							<view class="view-item-text" @click="$disableDoubleClick(homeClickFuc,'onoff',7)">
								<view class="view-text">推广</view>
							</view>
							<view style="width: 20px;"></view>
							<view class="view-item-text" @click="$disableDoubleClick(homeClickFuc,'onoff',8)">
								<view class="view-text">海外开证</view>
							</view>
							<view style="width: 20px;"></view>
							<view class="view-item-text" @click="$disableDoubleClick(homeClickFuc,'onoff',9)">
								<view class="view-text">担保车</view>
							</view>
						</view>
						
						<view class="view-box">
							<view class="view-item-left">
								<view class="swiper-view-top">
									<text class="swiper-text-top">{{promotionTitle}}</text>
									<text class="swiper-text-top__tag">限时</text>
								</view>
								<view class="swiper_box_2">
									<swiper circular="false" display-multiple-items="1" :autoplay="true" :vertical="false">
										<swiper-item v-for="(item,index) in promotionList" :key="index"
											@click="$disableDoubleClick(promotionClick,'onoff',item)">
											<!-- 支付宝小程序需要添加view点击才能生效 -->
											<!-- <view @click="swiperClick(item)"> -->
											<!-- 注释当前swiper图片暂时无法展示，使用固定图片 -->
											<!-- <image class="swiper_box_2" :src="item.cover_url"> -->
												
											<!-- </image> -->
											<!-- </view> -->
											
											<!-- <view> -->
												<view class="swiper-view-item-box-bottom">
													<view class="swiper-text-item-bottom">{{item.describe}}</view>
													<!-- <view class="swiper-text-item-bottom">{{item.name}}</view> -->
												</view>
												<image :src="item.cover_url" style="width: 150px; height:80px" />
												<!-- <image src="@/static/home_car_example.png" mode="scaleToFill" style="width: 150px; height:75px"> -->
											<!-- </view> -->
											
										</swiper-item>
									</swiper>
								</view>
						
							</view>
				
							<view class="view-item-right">
								<view class="view-item-right__card" @click="$disableDoubleClick(homeClickFuc,'onoff',2)">
									<view class="view-item-right__card__text">
										<text class="view-item-right__card__text__title">新车</text>
										<text class="view-item-right__card__text__subTitle">进入新车专区</text>
									</view>
									<view style="flex: 1;"></view>
									<image class="view-item-right__card__image" src="@/static/new_car.png"></image>
								</view>
								<view style="height: 7px;"></view>
								<view class="view-item-right__card" @click="$disableDoubleClick(homeClickFuc,'onoff',3)">
									<view class="view-item-right__card__text">
										<text class="view-item-right__card__text__title">最新快报</text>
										<text class="view-item-right__card__text__subTitle">最新消息抢先知道</text>
									</view>
									<view style="flex: 1;"></view>
									<image class="view-item-right__card__image" src="@/static/notice.png"></image>
								</view>
								<view style="height: 7px;"></view>
								<view class="view-item-right__card" @click="$disableDoubleClick(homeClickFuc,'onoff',4)">
									<view class="view-item-right__card__text">
										<text class="view-item-right__card__text__title">二手车</text>
										<text class="view-item-right__card__text__subTitle">进入二手车专区</text>
									</view>
									<view style="flex: 1;"></view>
									<image class="view-item-right__card__image" src="@/static/secondhand_car.png"></image>
								</view>
								<!-- <view class="xincheViewClass" @click="$disableDoubleClick(homeClickFuc,'onoff',2)">
									<image class="xinche-image" src="@/static/new_car.png"></image>
									<view class="xincheText">新车</view>
								</view>
								<view class="kuaibao-ershou-box">
									<view class="kuaibaoView" @click="$disableDoubleClick(homeClickFuc,'onoff',3)">
										<image class="kuaibao-ershou-image kuaibao-image" src="@/static/notice.png"></image>
										<view class="kuaibaoText">快报</view>
									</view>
									<view class="ershoucheView" @click="$disableDoubleClick(homeClickFuc,'onoff',4)">
										<image class="kuaibao-ershou-image ershouche-image"
											src="@/static/secondhand_car.png"></image>
										<view class="ershoucheText">二手车</view>
									</view>
								</view> -->
							</view>
						</view>
					</view>
				
				
					<!-- <view class="line-5"></view> -->
					<view class="ms-box">
						<view class="ms-box__view">
							<view class="msg-view-box">
								<view class="message-text-title">站内消息</view>
							</view>
							<view v-for="(item,index) in stationMessageDa" :key="index">
								<view class="msg-item-box" @click="msgClick(item)">
									<view class="msg-content-class">{{item.title}}</view>
									<image class="msg-image-class" mode="widthFix" :src="item.cover_url" v-if="item.cover_url"></image>
								</view>
								<view class="line"></view>
							</view>
						</view>
					</view>
					<view class="height100"></view>
				</view>
			</view>
			
			
		</view>

	</view>
</template>

<script>
	import customNav from "@/components/custom-nav/custom-nav.vue";
	import cssArcBackground from "@/components/cssArcBackground/cssArcBackground.vue";
	import addressSearch from "@/components/addressSearch/addressSearch.vue";
	import {
		getStationMessage,
		getRotationChart,
		bodyFunList,
		getPromotionList
	} from "@/api/home.js";
	export default {
		components: {
			customNav,
			addressSearch,
			cssArcBackground
		},
		data() {
			return {
				onoff: true, //防抖动的字段
				datalenght: 1,
				rotationChartList: [{
					"id": "",
					"cover_url": "", //图片链接
					"url": "" //不为空时可以跳转
				}],
				
				promotionList:[],
				promotionTitle: '',
				// carListData: [],
				stationMessageDa: [],
				isShowAddressSearch: true
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN

			// #endif
			var that = this
			//获取站内消息
			getStationMessage().then(res => {
				if (res.code == 0) {
					that.stationMessageDa = res.data
				} else {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
				}
			})

			//获取轮播图
			getRotationChart().then(res => {
				if (res.code == 0) {
					that.rotationChartList = res.data
					that.datalenght = that.rotationChartList.length
				} else {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
				}
			})
			
			// 获取车源推广
			
			getPromotionList().then(res => {
				if (res.code == 0) {
					this.promotionTitle = res.data.promotion_title
					this.promotionList = res.data.result
				}
			})
		},
		onShow() {
			try {
				this.$refs.setAddres.setAddres()
			} catch (e) {
				//TODO handle the exception
			}
		},
		methods: {
			msgClick(item) {
				this.$utils.log("打印点击item返回的数据" + JSON.stringify(item))
				uni.navigateTo({
					url: '/pages/home/stationMessage/stationMessage?content=' + item.content
				})
			},
			homeClickFuc(inta) {
				this.$utils.log(inta)
				switch (inta + "") {
					case "1": {
						break;
					}
					case "2": {
						uni.navigateTo({
							url: '/main/home/newCar/newCar'
						})
						break;
					}
					case "3": {
						uni.navigateTo({
							url: '/pages/home/notice/notice'
						})
						break;
					}
					case "4": {
						uni.navigateTo({
							url: '/secondhandCar/index'
						})
						break;
					}
					case "5": {
						uni.navigateTo({
							url: '/pages/home/logistics/logistics'
						})
						break;
					}
					case "6": {
						bodyFunList('financial_advances').then(res => {
							if (res.data) {
								if (res.code == 0) {
									uni.navigateTo({
										url: '/pages/home/banking/banking?content=' + res.data.content
									})
								}
							}
						})
						break;
					}
					case "7": {
						bodyFunList('promotion').then(res => {
							if (res.data) {
								if (res.code == 0) {
									uni.navigateTo({
										url: '/pages/home/plug/plug?content=' + res.data.content
									})
								}
							}
						})
						break;
					}
					case "8": {
						bodyFunList('overseas_issuance').then(res => {
							if (res.data) {
								if (res.code == 0) {
									uni.navigateTo({
										url: '/pages/home/overseas/overseas?content=' + res.data.content
									})
								}
							}
						})
						break;
					}
					case "9": {
						bodyFunList('guarantee_vehicle').then(res => {
							if (res.data) {
								if (res.code == 0) {
									uni.navigateTo({
										url: '/pages/home/guaranteeCar/guaranteeCar?content=' + res.data
											.content
									})
								}
							}
						})
						break;
					}
				}
			},
			addressBtn(address) {
				this.$utils.toastDebug('点击选择城市   ' + address)
			},
			searchBtn(content) {
				this.$utils.toastDebug('点击搜索按钮 input输入的内容：   ' + content)
			},
			swiperClick(item) {
				this.$utils.log("点击了swiperitem " + JSON.stringify(item))
				if (item.url != null & item.url != '' & item.url != undefined) {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			
			promotionClick(item) {
				if (item.state == 2) {
					uni.navigateTo({
						url: '/pages/home/secondhandCar/secondhandCarDetails/secondhandCarDetails?carId=' +
							item.source_id,
					})
				} else {
					uni.showModal({
						title: '新车暂未开放',
						icon: 'none',
						duration: 3000,
					})
				}
			}
		}
	}
</script>

<style>
	.line {
		width: 676rpx;
		background-color: #eee;
		height: 2rpx;
		margin-top: 18rpx;
	}

	.msg-image-class {
		width: 100%;
		height: 280rpx;
		background: #F2F2F2;
		opacity: 1;
		border-radius: 20rpx;
		margin-top: 38rpx;
	}

	.msg-content-class {
		/* width: 672rpx; */
		height: auto;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000026;
		opacity: 1;
		margin-top: 26rpx;

	}

	.msg-view-box {
		width: 75px;
		background: url(@/static/bac-small.png);
		background-size: 100% 100%;
	}

	.height100 {
		height: 150rpx;
		/* width: 750rpx; */
		width: 100%;
	}

	.pad28 {
		/* padding: 0rpx 28rpx; */
	}



	.message-text-title {
		width: 140rpx;
		font-size: 30rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		margin-left: 2rpx;
	}

	.swiper-mark-view-num {
		font-size: 20rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 1;
	}

	.swiper-mark-view-index {
		font-size: 20rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: 400;
		color: #FBAA09;
		opacity: 1;
	}

	.swiper-mark-view-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 6rpx;
	}

	.swiper-text-item-bottom {
		margin-bottom: 20px;
		font: Alimama ShuHeiTi;
		font-size: 10px;
		color: #666666;
	}

	.swiper-view-item-box-bottom {
		margin-top: 8px;
		width: 366rpx;
		height: auto;
		opacity: 1;
	}

	.swiper-text-top {
		font-size: 15px;
		font-family: Alimama ShuHeiTi;
		font-weight: 500;
		color: #333333;
	}
	
	.swiper-text-top__tag {
		font-family: Source Han Sans CN;
		font-size: 9px;
		color: #FFFFFF;
		background-color: #FF6D34;
		border-radius: 6px;
		margin-left: 5px;
		text-align: center;
		padding: 2px 8px 2px 8px;
	}

	.swiper-view-top {
		/* width: 366rpx; */
		/* height: 86rpx; */
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.swiper_box_banner_box{
		/* background: linear-gradient(to bottom, #4E6ECC, #FFFFFF); */
		opacity: 1;
		height: 220rpx;
		border-radius: 20rpx;
		width: 100%;
	}

	.swiper_box_2 {
		/* width: 366rpx; */
		/* height: 152rpx; */
		/* padding-bottom: 20px; */
	}

	.line-5 {
		height: 10px;
		background: #F5F5F5;
		opacity: 1;
	}


	.page-wraper {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
		background-color: #F5F5F5;
	}

	.header-class {
		width: 100%;
		height: auto;
		display: flex;
		background-color: #4E6ECC;
		justify-content: center;
		align-items: center;
	}

	.address-view-class {
		margin-left: 10rpx;
	}

	.address-text {
		font-size: 28rpx;
		color: #fefefe;
		margin: 8rpx;
	}

	.inputView {
		flex: 4;
		margin: 10rpx;
	}

	.inputClass {

		background-color: #fefefe;
		margin: 10rpx;
		padding: 10rpx;
		border-radius: 50rpx;
		font-family: uniicons;
		text-decoration: none;
	}

	.contentViewBox {
		/* width: 100%; */
		height: auto;
		/* 父元素设置相对定位 */
		position: relative;
	}

	.swiperImageViewClass {
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘  */
		z-index: 1;
		text-align: center;
	}

	.imageSwiperClass {
		background: #FFFFFF;
		opacity: 1;
		width: 100%;
		height: 220rpx;
		border-radius: 20rpx;
		/* margin-left: 10px; */
		/* margin-right: 10px; */
	}

	.swiper-item-absolute {
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘  */
		top: 64rpx;
		left: 28rpx;
		z-index: 1;
	}

	.swiper-item-text {
		font-size: 52rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: 400;
		line-height: 0rpx;
		color: #FFFFFF;
	}


	.view-box {
		margin-top: 36rpx;
		display: flex;
	}

	.view-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.view-item-text {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.view-item-imgae {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.view-item-left {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* align-items: center; */
		width:220px;
		height: auto;
		/* height: 326rpx; */
		/* background: linear-gradient(to bottom right, #737373, #9FA0A7); */
		background-color: #FFFFFF;
		opacity: 1;
		border-radius: 12px;
	}

	.view-item-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* height: 326rpx; */
		/* 父元素设置相对定位 */
		position: relative;
		margin-left: 14px;
	}
	
	.view-item-right__card {
		border-radius: 10px;
		background-color: #FFFFFF;
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: row;
		display: flex;
		align-items: center;
	}
	
	.view-item-right__card__text {
		display: flex;
		flex-direction: column;
		margin-left: 10px;
	}
	
	.view-item-right__card__image {
		width: 60rpx;
		height: 50rpx;
		margin-right: 10px;
	}
	
	.view-item-right__card__text__title {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 14px;
		text-align: left;
	}
	
	.view-item-right__card__text__subTitle {
		margin-top: 5px;
		text-align: left;
		font: Alimama ShuHeiTi;
		font-size: 12px;
		color: #666666;
	}

	.xincheViewClass {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 316rpx;
		height: 138rpx;
		background: #E6EDFD;
		opacity: 1;
		border-radius: 28rpx;
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘  */
		top: 0;
		z-index: 1;

	}

	.xincheText {
		font-size: 32rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		line-height: 0rpx;
		color: #0E59EA;
		opacity: 1;
		margin-left: 38rpx;
	}

	.kuaibao-ershou-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘  */
		bottom: 0;
		z-index: 1;

	}

	.kuaibaoView {
		display: flex;
		justify-content: space-between;
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘  */
		bottom: 0;
		z-index: 1;
		width: 150rpx;
		height: 150rpx;
		background: #F7F1FE;
		opacity: 1;
		border-radius: 28rpx;
		display: flex;
		justify-content: center;
		/* 父元素设置相对定位 */
		position: relative;
	}

	.ershoucheView {
		display: flex;
		justify-content: space-between;
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘  */
		bottom: 0;
		z-index: 1;
		width: 150rpx;
		height: 150rpx;
		background: #95DCDD28;
		border-radius: 28rpx;
		margin-left: 16rpx;
		display: flex;
		justify-content: center;
		/* 父元素设置相对定位 */
		position: relative;
	}

	.kuaibao-ershou-image {
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘  */
		bottom: 102rpx;
		z-index: 1;
		text-align: center;
	}

	.kuaibao-image {
		width: 63.47rpx;
		height: 66.96rpx;
	}

	.ershouche-image {
		width: 85.54rpx;
		height: 68.96rpx;
	}

	.kuaibaoText {
		font-size: 32rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #954DF0;
		opacity: 1;
		margin-top: 70rpx;
	}

	.ershoucheText {
		font-size: 32rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #39BDBF;
		opacity: 1;
		margin-top: 70rpx;
	}

	.view-img {
		width: 60rpx;
		height: 60rpx;
	}


	.view-text {
		margin-top: 8px;
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		color: #000026;
		opacity: 1;
	}

	.view-da-img {
		width: 100%;
		height: 360rpx;
	}

	.ms-box {
		text-align: left;
		background-color: #FFFFFF;
		/* margin: 0px 14px 0px 14px; */
		border-radius: 10px;
		margin-top: 10px;
		padding: 14px;
	}
	
	.ms-box__view {
		/* margin: 10px 14px 10px 14px ; */
		/* padding-top: 5px; */
		width: auto;
		height: atuo;
	}

	.ms-title {
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
		font-family: 'Courier New', Courier, monospace;
	}

	.ms-content {
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.ms-image {
		width: 100%;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
	
	.content-view {
		margin-top: 15px;
		margin-right: 5px;
		margin-left: 5px;
		/* margin: 14px; */
	}
	
	.background {
		width: 100%;
		height: 100vh;
		/* 父元素设置相对定位 */
		position: relative;
		background-color: #F5F5F5;
	}
	
</style>